<template>
  <div style="margin-left: 10px">
    <template v-if="level < 2">
      <div v-for="authority in authorities" :key="authority.id">
        <template v-if="authority.authorityType == 1">
          <el-checkbox :label="authority.authorityName" :value="authority.id" v-model="authority.checked" />
        </template>
        <template v-else-if="authority.authorityType == 2">
          <el-checkbox-button
            :label="authority.authorityName"
            :value="authority.id"
            v-model="authority.checked"
          />
        </template>
        <template
          v-if="
            authority.childAuthorityList &&
            authority.childAuthorityList.length > 0
          "
        >
          <RecursiveAuthorityCheckbox
            :authorities="authority.childAuthorityList"
            :level="level + 1"
          />
        </template>
      </div>
    </template>
    <template v-else-if="level == 2">
      <template v-for="authority in authorities" :key="authority.id">
        <template v-if="authority.authorityType == 1">
          <el-checkbox :label="authority.authorityName" :value="authority.id" v-model="authority.checked" />
        </template>
        <template v-else-if="authority.authorityType == 2">
          <el-checkbox-button
            :label="authority.authorityName"
            :value="authority.id"
            v-model="authority.checked"
          />
        </template>
      </template>
    </template>
  </div>
</template>

<script lang="ts" setup>
import { ref, watch, defineEmits, defineProps } from "vue";

const props = defineProps({
  authorities: Array,
  level: null,
});

</script>